<template>
  <PopUps :bgIndex="1000" :boxIndex="1001" widthMy="60%" height-my="78%">
    <div class="outboundId-box">
      <div class="header-top">
        <h3>选择施工队</h3>
        <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
      </div>
      <!-- 选择施工队 -->
      <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
      <forTableCom
        :color="color"
        :idActive="idActive"
        :bg="bg"
        @handleSelectionChange="handleSelectionChange"
        :tableHeaderData="inventoryTableHeaderData"
        :pagination="false"
        :tableData="inventoryTableData"
        height="350"
        @scrollhandler="scrollhandler"
      >
      </forTableCom>
      <div class="btn">
        <el-button type="primary" @click="onAdd" class="add">确认</el-button>
        <el-button type="primary" @click="closePopUps" class="cancel" color="#E4E9FC"
          >取消</el-button
        >
      </div>
    </div>
  </PopUps>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue'
import PopUps from '@/components/My/PopUps'
import forTableCom from '@/components/forTableCom/index.vue'
import { ref, onMounted, defineEmits, defineProps } from 'vue'
import { updateConstructionApi } from '@/api/teams'

const { proxy } = getCurrentInstance()
import { listTeams } from '@/api/teams'

const props = defineProps(['linshiId','copyId'])
const emit = defineEmits(['closePopUps'])
// 勾选背景id
const idActive = 'constructionTeamId'
let color = '#000'
let bg = '#F6F8FE'
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
let orderId = ref(null)
// 选择的列
let optionOrderList = ref(null)
// 表单
let inventoryForm = ref({
  constructionTeamId: '', // 施工队编号
  constructionTeamName: '', // 施工队名称
  constructionTeamRegion: '', // 施工队区域
  constructionTeamRank: '', // 施工队等级
  constructionTeamType: '', // 施工队类别
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    name: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    name: 'constructionPhone',
    label: '施工队电话',
  },
  {
    name: 'constructionTeamType',
    label: '施工队类别',
    type: 'select',
    client: [
      {
        label: '固定施工队',
        value: '0',
      },
      {
        label: '临时施工队',
        value: '1',
      },
    ],
  },
])
// 选择订单号
const inventoryTableHeaderData = ref([
  {
    prop: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    prop: 'constructionTeamRegion',
    label: '施工队区域',
  },
  {
    prop: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    prop: 'constructionTeamType',
    label: '施工队类别',
  },
  {
    prop: 'constructionPhone',
    label: '施工队电话',
  },
  {
    prop: 'constructionTeamRank',
    label: '施工队等级',
  },
  {
    prop: 'orderNum',
    label: '接单数量',
  },
  {
    prop: 'completionRate',
    label: '完成率',
  },
  {
    prop: 'type',
    label: '状态',
  },
])
// 选择订单号的表格数据
const inventoryTableData = ref([])
// 滑动到底部
const scrollhandler = () => {
  let params = {
    pageNum: pageNum.value++,
    pageSize: pageSize.value + 12,
  }
  // 数据请求对比优化
  if (totals.value > inventoryTableData.value.length) {
    getselectOrderData(params)
  }
}
// 选择的列
const handleSelectionChange = (v) => {
  optionOrderList.value = v
}
const closePopUps = () => {
  emit('closePopUps')
}
// 查询安装队数据
const listTeamsFn = async (data = '') => {
  let res = await listTeams(data)
  let { code, rows, total } = res
  if (code == 200) {
    rows.forEach((v) => {
      // 完成率
      v.completionRate = ((v.succeedNum / v.orderNum) * 100).toFixed(2) === 'NaN'? '暂无': ((v.succeedNum / v.orderNum) * 100).toFixed(2) + '%'
    })
    // 改变日期显示长度问题
    inventoryTableData.value = rows
    totals.value = total
  }
}
// 查找
const onSearch = (v) => {
  console.log(v)
  // 每次查询后回到页1
  listTeamsFn(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(obj, inventoryForm.value)
  listTeamsFn(params)
}

// 任务分配
const onAdd = async () => {
  if (optionOrderList.value.length === 1) {
    let params = {
      constructionTeamId: optionOrderList.value[0].constructionTeamId,
      orderId: orderId.value,
      id: props.copyId,
    }
    let { code, msg } = await updateConstructionApi(params)
    if (code == 200) {
      proxy.$modal.msgSuccess(msg)
      closePopUps()
    } else {
      proxy.$modal.msgError('数据失败')
    }
  } else {
    proxy.$modal.msgWarning('只能分配一个安装队')
  }
}
onMounted(() => {
  orderId.value = props.linshiId

  listTeamsFn()
})
</script>
<style scoped lang="scss">
.outboundId-box {
  padding: 16px;

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0px;
    background: #fff;
    z-index: 2024;
    margin-bottom: 15px;

    .iconfont {
      color: #666;
      font-size: 27px;
    }
  }

  .btn {
    width: 100%;
    margin-top: 40px;
    text-align: right;
  }
}
</style>
